<template>
  <div>
    <Header></Header>
    <section>
      <Routers></Routers>
      <div id="section" class="main">
        <div class="common_header">
          <span class="common_header_tip">添加</span>
        </div>
        <div id="list">
          <ul id="list_top">
            <li>
              <span class="list_title">项目名称:</span>
              <input type="text" autocomplete="off" v-model="project_name">
            </li>
            <li>
              <span class="list_title">项目编号:</span>
              <div class="pro_sn">
                <span>{{com_sn}}</span>
                <input type="text" v-model="project_num_year" placeholder="年度号" maxlength="2">
                <input type="text" v-model="project_num" placeholder="项目号" maxlength="4">
              </div>
              <i class="inlineBlockIcon wenhao"  @mouseover='hiddenboxISshow' @mouseout="hiddenboxIShidden"></i>
              <div class="hiddenbox" v-if="hiddenbox">
                <p>为确保项目编号的全国唯一性，项目编码由24位序列号组成，前18位为统一社会代码，19、20位为立项和设置辅助账的年度号，21至24位为项目序号。</p>
              </div>
            </li>
            <li>
              <span class="list_title">技术领域:</span>
              <!--<input type="text" autocomplete="off">-->
              <div id="area_box">
                <input type="text" readonly @click="lingyuBox" v-model="lingyu" :class="{'error':!lingyuCheck}">
                <i id="xiala_logo"></i>
                <div id="hidden_box" v-if="lingyubox">
                  <ul>
                    <li v-if="lingyu1_ISchoose" @click="hidden_box_choose(1)" :class="{active:lingyu1_ISclick}"><span>{{lingyu1_name}}</span></li>
                    <li v-if="lingyu2_ISchoose" @click="hidden_box_choose(2)" :class="{active:lingyu2_ISclick}"><span>{{lingyu2_name}}</span></li>
                    <li v-if="lingyu3_ISchoose" @click="hidden_box_choose(3)" :class="{active:lingyu3_ISclick}"><span>{{lingyu3_name}}</span></li>
                  </ul>
                  <div v-if="lingyu1_ISclick">
                    <ul class="choose_list">
                      <li v-for="(item, index) in lingyu1_arr" @click="choose_lingyu1(item.id,index,item.tec_name)" :class="{active:lingyu1_ISchoose_ed==index}">{{item.tec_name}}</li>
                    </ul>
                  </div>
                  <div v-if="lingyu2_ISclick">
                    <ul class="choose_list">
                      <li v-for="(item, index) in lingyu2_arr" @click="choose_lingyu2(item.id,index,item.tec_name)" :class="{active:lingyu2_ISchoose_ed==index}">{{item.tec_name}}</li>
                    </ul>
                  </div>
                  <div v-if="lingyu3_ISclick">
                    <ul class="choose_list">
                      <li v-for="(item, index) in lingyu3_arr" @click="choose_lingyu3(item.id,index,item.tec_name)" :class="{active:lingyu3_ISchoose_ed==index}">{{item.tec_name}}</li>
                    </ul>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <span class="list_title">起止时间:</span>
              <div class="timer">
                <!--<input type="text" autocomplete="off" v-model="project_time_start">-->
                <vue-datepicker-local v-model="project_time_start" format="YYYY-MM-DD" class="datepicker"/>
                <span>-</span>
                <!--<input type="text" autocomplete="off" v-model="project_time_end">-->
                <vue-datepicker-local v-model="project_time_end" format="YYYY-MM-DD" class="datepicker"/>
              </div>
            </li>
            <li>
              <span class="list_title">研发费用总预算(元):</span>
              <input type="text" autocomplete="off" v-model="project_money">
            </li>
            <li>
              <span class="list_title">技术来源:</span>
              <!--<input type="text" autocomplete="off">-->
              <select v-model="project_jishulaiyuan">
                <option value="">请选择</option>
                <option :value="item" v-for="item in jishulaiyuan_list">{{item}}</option>
              </select>
            </li>
            <li>
              <span class="list_title">当前年度研发经费(元):</span>
              <input type="text" autocomplete="off" v-model="project_money_year">
            </li>
            <li>
              <span class="list_title">知识产权编号:</span>
              <input type="text" autocomplete="off" v-model="project_zhishinum" :placeholder="zs_place_text" :class="{'error':zs_error}">
            </li>
            <li>
              <span class="list_title">前一年研发经费(元):</span>
              <input type="text" autocomplete="off" v-model="project_money_previousYear">
            </li>
            <li>
              <span class="list_title">前两年研发经费(元):</span>
              <input type="text" autocomplete="off" v-model="project_money_previous2Year">
            </li>
            <li class="file_list">
              <span class="list_title">立项文件:</span>
              <div class="rightbox">
                <div class="filebox">
                  <i class="upload_logo" v-if="!lixiang_upload"></i>
                  <i class="file_logo" v-if="lixiang_upload"></i>
                  <span class="upload_text" v-if="!lixiang_upload">上传文件</span>
                  <span class="file_text" v-if="lixiang_upload">{{file_lixiang_name_page}}</span>
                  <span class="del_text" v-if="lixiang_upload"  @click="del_file(1)">删除</span>
                  <input type="file" @change="upload($event,1)" v-if="!lixiang_upload">
                </div>
                <a href="" target="_blank" class="common_showpdf_text">下载模板：xxxx.pdf</a>
              </div>
              <i class="inlineBlockIcon wenhao"  @mouseover='hiddenbox_smallISshow1' @mouseout="hiddenbox_smallIShidden1"></i>
              <div class="hiddenbox_small" v-if="hiddenbox_small1">
                <p>请下载模板保存，更改，保存并上传</p>
              </div>
            </li>
            <li class="file_list">
              <span class="list_title">立项报告:</span>
              <div class="rightbox">
                <div class="filebox">
                  <i class="upload_logo" v-if="!baogao_upload"></i>
                  <i class="file_logo" v-if="baogao_upload"></i>
                  <span class="upload_text" v-if="!baogao_upload">上传文件</span>
                  <span class="file_text" v-if="baogao_upload">{{file_baogao_name_page}}</span>
                  <span class="del_text" v-if="baogao_upload" @click="del_file(2)">删除</span>
                  <input type="file" @change="upload($event,2)" v-if="!baogao_upload">
                </div>
                <a href="" target="_blank" class="common_showpdf_text">下载模板：xxxx.pdf</a>
              </div>
              <i class="inlineBlockIcon wenhao"  @mouseover='hiddenbox_smallISshow2' @mouseout="hiddenbox_smallIShidden2"></i>
              <div class="hiddenbox_small" v-if="hiddenbox_small2">
                <p>请下载模板保存，更改，保存并上传</p>
              </div>
            </li>
            <li class="file_list">
              <span class="list_title">验收报告:</span>
              <div class="rightbox">
                <div class="filebox">
                  <i class="upload_logo" v-if="!yanshou_upload"></i>
                  <i class="file_logo" v-if="yanshou_upload"></i>
                  <span class="upload_text" v-if="!yanshou_upload">上传文件</span>
                  <span class="file_text" v-if="yanshou_upload">{{file_yanshou_name_page}}</span>
                  <span class="del_text" v-if="yanshou_upload" @click="del_file(3)">删除</span>
                  <input type="file" @change="upload($event,3)" v-if="!yanshou_upload">
                </div>
                <a href="" target="_blank" class="common_showpdf_text">下载模板：xxxx.pdf</a>
              </div>
              <i class="inlineBlockIcon wenhao"  @mouseover='hiddenbox_smallISshow3' @mouseout="hiddenbox_smallIShidden3"></i>
              <div class="hiddenbox_small" v-if="hiddenbox_small3">
                <p>请下载模板保存，更改，保存并上传</p>
              </div>
            </li>
          </ul>
          <ul id="list_bottom">
            <li>
              <span class="list_title">目的及组织实施方式:</span>
              <textarea v-model="project_mudi"></textarea>
            </li>
            <li>
              <span class="list_title">核心技术及创新点:</span>
              <textarea v-model="project_jishuchuangxin"></textarea>
            </li>
            <li>
              <span class="list_title">取得的阶段性成果:</span>
              <textarea v-model="project_chengguo"></textarea>
            </li>
          </ul>
          <div id="btnbox">
            <button class="add_tankuang_btn" @click="save">保存</button>
            <button class="add_tankuang_btn" @click="cancel">取消</button>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
  import Routers from '@/template/routers.vue'
  import Header from '@/template/common_header.vue'
  import VueDatepickerLocal from 'vue-datepicker-local'
  import { Toast } from 'mint-ui';
  import lu from '@/assets/public.js'
  export default {
    name: 'rdManagement_add',
    components: {
      Routers,
      Header,
      VueDatepickerLocal
    },
    data () {
      return {
        id:null,
        project_name:'',
        com_sn:this.$store.state.com_sn,
        project_num_year:'',
        project_num:'',
        project_time_start:'',
        project_time_end:'',
        project_money:'',
        project_jishulaiyuan:'',
        project_zhishinum:null,
        zs_place_text:'',
        zs_error:false,
        project_money_year:null,
        project_money_previousYear:null,
        project_money_previous2Year:null,

        file_lixiang:'',
        file_lixiang_name:'',
        file_lixiang_name_page:'',
        lixiang_upload:false,
        file_baogao:'',
        file_baogao_name:'',
        file_baogao_name_page:'',
        baogao_upload:false,
        file_yanshou:'',
        file_yanshou_name:'',
        file_yanshou_name_page:'',
        yanshou_upload:false,

        project_mudi:'',
        project_jishuchuangxin:'',
        project_chengguo:'',

        hiddenbox:false,
        hiddenbox_small1:false,
        hiddenbox_small2:false,
        hiddenbox_small3:false,
        jishulaiyuan_list:[
          '大专院校','地方属科研院校','地方企业技术','引进技术本企业消化创新','国外技术','企业自有技术',' 中央属科研院所'
        ],
        /*技术领域*/
        lingyubox:false,
        lingyuCheck:true,
        lingyu:'',
        lingyuID:0,
        lingyu1_arr:[],
        lingyu2_arr:[],
        lingyu3_arr:[],
        lingyu1_name:'请选择',
        lingyu2_name:'请选择',
        lingyu3_name:'请选择',
        lingyu1_ISchoose:true,/*判断省是否被选择，如果被选择，则tab对应的省的盒子隐藏。跳到下一个市的盒子进行选择*/
        lingyu1_ISclick:true,/*判断省是否被点击，如果被点击，则tab对应的省的盒子显示。*/
        lingyu1_ISchoose_ed:0,/*判断省被选择的省的id，如果已经被选择，给予对应的被选择样式，跳到下一个市的盒子进行选择。*/

        lingyu2_ISchoose:false,
        lingyu2_ISclick:true,
        lingyu2_ISchoose_ed:0,

        lingyu3_ISchoose:false,
        lingyu3_ISclick:true,
        lingyu3_ISchoose_ed:0,
      }
    },
    mounted: function() {
      this.axios.get('/index/get_tecs').then((res)=>{
        if(res.data.code==1){
          let datas = res.data.data
          this.lingyu1_arr = datas
        }
      })
      let id = this.$route.params.id
      if(id){
        this.id = id
        this.axios.get('/index/show_pro?id='+id).then((res)=>{
          if(res.data.code==1){
            let datas = res.data.data
            this.project_name = datas.pro_name
            this.project_num_year = datas.pro_sn_year
            this.project_num = datas.pro_sn
            this.project_time_start = datas.pro_start
            this.project_time_end = datas.pro_end
            this.project_money = datas.pro_total
            this.project_jishulaiyuan = datas.tec_source
            this.project_zhishinum = datas.know_sn
            this.project_money_year = datas.this_year
            this.project_money_previousYear = datas.pre_year
            this.project_money_previous2Year = datas.pre2_year

            if(datas.pro_file){
              this.file_lixiang = datas.pro_file
              this.file_lixiang_name = datas.pro_file_info
              this.file_lixiang_name_page = lu.textEach(datas.pro_file_info,9)
              this.lixiang_upload = true
            }
            if(datas.pro_report){
              this.file_baogao = datas.pro_report
              this.file_baogao_name = datas.pro_report_info
              this.file_baogao_name_page = lu.textEach(datas.pro_report_info,9)
              this.baogao_upload = true
            }
            if(datas.check_report){
              this.file_yanshou = datas.check_report
              this.file_yanshou_name = datas.check_report_info
              this.file_yanshou_name_page = lu.textEach(datas.check_report_info,9)
              this.yanshou_upload = true
            }

            this.project_mudi = datas.pro_imp
            this.project_jishuchuangxin = datas.pro_core
            this.project_chengguo = datas.pro_result

            this.lingyu = datas.tec_id.name
            this.lingyuID = datas.tec_id.id
          }
        })
      }else{
        console.log('add')
      }
    },
    methods: {
      /*技术领域*/
      lingyuBox () {
        this.lingyubox = !this.lingyubox
      },
      /*技术领域选择*/
      hidden_box_choose (boxID) {
        if(boxID==1){
          this.lingyu1_ISclick = true
          this.lingyu2_ISclick = false
          this.lingyu3_ISclick = false
        }else if(boxID==2){
          this.lingyu1_ISclick = false
          this.lingyu2_ISclick = true
          this.lingyu3_ISclick = false
        }else if(boxID==3){
          this.lingyu1_ISclick = false
          this.lingyu2_ISclick = false
          this.lingyu3_ISclick = true
        }
      },
      /*选择第一个技术领域*/
      choose_lingyu1 (ID,index,name) {
        this.lingyu1_ISchoose_ed = index
        this.lingyu1_name = name
        this.lingyu2_name = '请选择'
        this.lingyu3_ISclick = false
        this.lingyu3_ISchoose = false
        this.axios.get('/index/get_tecs?tec_id='+ID).then((res)=>{
          this.lingyu2_ISchoose = true
          this.lingyu1_ISclick = false
          this.lingyu2_ISclick = true
          this.lingyu2_arr = res.data.data
//          console.log(res.data.data)
        })
      },
      /*选择第二个技术领域*/
      choose_lingyu2 (ID,index,name) {
        this.lingyu2_ISchoose_ed = index
        this.lingyu2_name = name
        this.lingyu3_name = '请选择'
        this.axios.get('/index/get_tecs?tec_id='+ID).then((res)=>{
          this.lingyu3_ISchoose = true
          this.lingyu1_ISclick = false
          this.lingyu2_ISclick = false
          this.lingyu3_ISclick = true
          this.lingyu3_arr = res.data.data
//          this.cityID = cityID
        })
      },
      /*选择第三个技术领域*/
      choose_lingyu3 (ID,index,name) {
        this.lingyu3_name = name
        this.lingyu3_ISchoose_ed = index
        this.lingyuID = ID
        this.lingyubox = false
        let str = lu.textEach(name,11)
        this.lingyu = str
      },

      /*上传立项文件*/
      upload (e, id) {
        let file = e.target.files[0]
        let reader = new FileReader()
        reader.readAsDataURL(file)
        let _this = this
        reader.onload = function(e) {
          if(id == 1){
            let str = lu.textEach(file.name,9)
            _this.lixiang_upload = true
            _this.axios.post('/index/upload_qiniu',{
              code: this.result
            }).then((res)=>{
              if(res.data.code==1){
                _this.file_lixiang = res.data.key
                _this.file_lixiang_name = file.name
                _this.file_lixiang_name_page = str
//                _this.lixiang_upload = true
              }else{
                Toast(res.data.msg)
                return
              }
            }).catch(function (error) {
              Toast('网络连接超时，请稍后重试！')
              return
            });
          }else if(id == 2){
            let str = lu.textEach(file.name,9)
            _this.baogao_upload = true
            _this.axios.post('/index/upload_qiniu',{
              code: this.result
            }).then((res)=>{
              if(res.data.code==1){
                _this.file_baogao = res.data.key
                _this.file_baogao_name = file.name
                _this.file_baogao_name_page = str
//                _this.baogao_upload = true
              }else{
                Toast(res.data.msg)
                return
              }
            }).catch(function (error) {
              Toast('网络连接超时，请稍后重试！')
              return
            });
          }else if(id == 3){
            let str = lu.textEach(file.name,9)
            _this.yanshou_upload = true
            _this.axios.post('/index/upload_qiniu',{
              code: this.result
            }).then((res)=>{
              if(res.data.code==1){
                _this.file_yanshou = res.data.key
                _this.file_yanshou_name = file.name
                _this.file_yanshou_name_page = str
//                _this.yanshou_upload = true
              }else{
                Toast(res.data.msg)
                return
              }
            }).catch(function (error) {
              Toast('网络连接超时，请稍后重试！')
              return
            });
          }
        }
      },
      del_file (id) {
        if(id == 1){
          this.file_lixiang = ''
          this.file_lixiang_name = ''
          this.lixiang_upload = false
        }else if(id == 2){
          this.file_baogao = ''
          this.file_baogao_name = ''
          this.baogao_upload = false
        }else if(id == 3){
          this.file_yanshou = ''
          this.file_yanshou_name = ''
          this.yanshou_upload = false
        }
      },

      /*保存信息*/
      save () {
        if(!this.project_name||!this.project_num_year||!this.project_num||!this.project_time_start||!this.project_time_end||!this.project_money||!this.project_jishulaiyuan||!this.project_zhishinum||!this.project_money_year||!this.project_money_previousYear||!this.project_money_previous2Year||!this.file_lixiang||!this.file_lixiang_name||!this.file_baogao||!this.file_baogao_name||!this.file_yanshou||!this.file_yanshou_name||!this.project_mudi||!this.project_jishuchuangxin||!this.project_chengguo||!this.lingyuID){
          Toast('内容必须填写完整！！')
          return
        }
        if(!lu.regCheck(this.project_zhishinum,/^[A-Za-z0-9]{13}$/)){
          this.project_zhishinum = ''
          this.zs_place_text = '13位字母和数字的组合'
          this.zs_error = true
          return
        }else{
          this.zs_place_text = ''
          this.zs_error = false
        }
        this.project_time_start = new Date(this.project_time_start).toLocaleDateString().replace(/\//ig,"-")
        this.project_time_end = new Date(this.project_time_end).toLocaleDateString().replace(/\//ig,"-")
        this.axios.post('/index/save_pro',{
          id:this.id||'',
          pro_name:this.project_name,
          pro_sn_year:this.project_num_year,
          pro_sn:this.project_num,
          pro_start:this.project_time_start,
          pro_end:this.project_time_end,
          pro_total:this.project_money,
          tec_source:this.project_jishulaiyuan,
          know_sn:this.project_zhishinum,
          this_year:this.project_money_year,
          pre_year:this.project_money_previousYear,
          pre2_year:this.project_money_previous2Year,
          pro_file:this.file_lixiang,
          pro_file_info:this.file_lixiang_name,
          pro_report:this.file_baogao,
          pro_report_info:this.file_baogao_name,
          check_report:this.file_yanshou,
          check_report_info:this.file_yanshou_name,
          pro_imp:this.project_mudi,
          pro_core:this.project_jishuchuangxin,
          pro_result:this.project_chengguo,
          tec_id:this.lingyuID
        }).then((res)=>{
          if(res.data.code==1){
//            if(this.id){
//              this.$router.push({
//                path: '/rdManagement_detail/'+this.id,
//                name: 'rdManagement_detail',
//                params: {
//                  name: 'rdManagement_detail'
//                }
//              })
//            }else{
            this.$router.push({
              path: '/rdManagement',
              name: 'rdManagement',
              params: {
                name: 'rdManagement'
              }
            })
//            }
          }else{
            Toast(res.data.msg)
            return
          }
        })
      },
      cancel () {
        this.$router.push({
          path: '/rdManagement',
          name: 'rdManagement',
          params: {
            name: 'rdManagement'
          }
        })
      },

      hiddenboxISshow () {
        this.hiddenbox = !this.hiddenbox
      },
      hiddenboxIShidden () {
        this.hiddenbox = !this.hiddenbox
      },
      hiddenbox_smallISshow1 () {
        console.log(1)
        this.hiddenbox_small1 = true
      },
      hiddenbox_smallIShidden1 (){
        this.hiddenbox_small1 = false
      },
      hiddenbox_smallISshow2 () {
        this.hiddenbox_small2 = true
      },
      hiddenbox_smallIShidden2 (){
        this.hiddenbox_small2 = false
      },
      hiddenbox_smallISshow3 () {
        this.hiddenbox_small3 = true
      },
      hiddenbox_smallIShidden3 (){
        this.hiddenbox_small3 = false
      }
    }
  }
</script>

<style scoped>
  @import '../../assets/public.css';
  @import '//at.alicdn.com/t/font_749860_je5eki3tevb.css';

  input{
    color: #666;
  }
  select{
    color: #666;
  }
  textarea{
    color: #666;
  }
  #list{
    width:850px;
  }
  #list_top{
    display: flex;

    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top:34px;
    box-sizing: border-box;
  }
  #list_top>li{
    width:400px;
    /*flex:1;!**!*/
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    margin-bottom:27px;
  }
  #list_top>li.file_list{
    align-items: flex-start;
  }
  #list_top>li.file_list>span{
    padding-top:3px;
  }
  #list_top>li>input{
    width:220px;
    height:32px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    padding-left:5px;
  }
  #list_top>li>div.rightbox>.filebox{
    width:220px;
    height:32px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    padding-left:5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  #list_top>li>div.rightbox>.filebox>input{
    position: absolute;
    top:0;
    left:0;
    z-index: 2;
    width:100%;
    height:100%;
    opacity: 0;
  }
  #list_top>li>div.rightbox>.filebox>i.upload_logo{
    width:22px;
    height:22px;
    background-image: url("img/upload.png");
    margin-right:5px;
  }
  #list_top>li>div.rightbox>.filebox>i.file_logo{
    width:19px;
    height:17px;
    background-image: url("img/file.png");
    margin-right:5px;
  }
  #list_top>li>div.rightbox>.filebox>span.upload_text{
    color: #888;
    font-size:16px;
  }
  #list_top>li>div.rightbox>.filebox>span.file_text{
    color: #333;
    font-size:14px;
  }
  #list_top>li>div.rightbox>.filebox>span.del_text{
    color: #4797D4;
    font-size:14px;
    margin-left:5px;
    cursor: pointer;
  }
  #list_top>li>select{
    width:220px;
    height:32px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    padding-left:5px;
  }
  .list_title{
    color: #333;
    font-size:16px;
    padding-right:15px;
    display: inline-block;
    width:180px;
    text-align: right;
    box-sizing: border-box;
  }
  .pro_sn{
    display: flex;
    align-items: center;
  }
  .pro_sn>input{
    width:50px;
    height: 32px;
    border: 1px solid #ddd;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
  }
  .pro_sn>input:nth-child(2){
    margin:0 10px;
  }
  .wenhao{
    position: absolute;
    right:-32px;
    top:5px;
    /*transform: translateY(-50%);*/
    width:22px;
    height:22px;
    background: url("img/wenhao.png");
  }
  .hiddenbox{
    position: absolute;
    right:-357px;
    top:-60px;
    display: flex;
  }
  .hiddenbox>p{
    width:315px;
    height:117px;
    background: url("img/kuang.png");
    color: #333;
    font-size:15px;
    padding-left:34px;
    box-sizing: border-box;
    padding-top:17px;
    padding-right:11px;
  }
  .hiddenbox_small{
    position: absolute;
    right:-222px;
    top:-15px;
    display: flex;
    background: #fff;
    z-index: 2;
  }
  .hiddenbox_small>p{
    width:185px;
    height:90px;
    background-image: url("img/kuang_small.png");
    background-color: #fff;
    color: #333;
    font-size:15px;
    padding-left:34px;
    box-sizing: border-box;
    padding-top:17px;
    padding-right:11px;
  }
  .timer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width:250px;
    box-sizing: border-box;
  }
  .timer>input{
    width:90px;
    height:32px;
    border:1px solid #ddd;
    box-sizing: border-box;
  }
  #list_bottom>li{
    display: flex;
    align-items: flex-start;
    box-sizing: border-box;
    justify-content: flex-end;
    margin-bottom:27px;
  }
  #list_bottom textarea{
    width:670px;
    height:146px;
    resize: none;
    box-sizing: border-box;
    border:1px solid #ddd;
    padding:10px;
    margin:0;
    outline: none;
  }
  #btnbox{
    padding-left:180px;
  }
  #btnbox>button:first-child{
    margin-right:32px;
  }


  #area_box{
    position: relative;
    padding:0;
    margin:0;

    width:220px;
    height:32px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    padding-left:5px;
  }
  #area_box>input{
    width:100%;
    height: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
  }
  #area_box #xiala_logo{
    position: absolute;
    width:15px;
    height:8px;
    right:26px;
    top:50%;
    transform: translateY(-50%);
    background: url("img/xiala.png");
  }
  #hidden_box{
    width:600px;
    position: absolute;
    top:30px;
    left:-1px;
    z-index: 5;
    background-color: #fff;
    border-radius: 2px 2px 0 0;
    border: 1px solid #ddd;
    box-sizing: border-box;
  }
  #hidden_box>ul{
    height:36px;
    border-bottom:1px solid #2377BA;
    display: flex;
    align-items: flex-end;
  }
  #hidden_box>ul>li{
    margin-left:5px;
    /*width:83px;*/
    padding:0 15px;
    height:30px;
    vertical-align: middle;
    line-height: 30px;
    border-top: 1px solid #2377BA;
    border-left: 1px solid #2377BA;
    border-right: 1px solid #2377BA;
    background-color: #fff;
  }
  #hidden_box>ul>li>span{
    color: #333;
    font-size:15px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    /*line-height: 100%;*/
    width:100%;
    height:100%;
  }
  #hidden_box>ul>li.active{
    background-color: #2377BA;
  }
  #hidden_box>ul>li.active>span{
    color: #fff;
  }
  .choose_list{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding:10px;
  }
  .choose_list>li{
    padding:6px 15px;
    white-space: nowrap;
    cursor: pointer;
    color: #333;
    font-size:16px;
    background-color: #fff;
  }
  .choose_list>li.active{
    background-color: #2377BA;
    color: #fff;
  }
</style>
